<template>
  <div class="navigation">
    <el-row :gutter="20">
      <el-col v-for="(item, index) in list" :key="index" :xl="6">
        <div class="card" @click="toPage(item.url)">
          <h2>{{ item.label }}</h2>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
const list = [
  { label: '用料申请', url: '/production-plan/apply-material' },
  { label: '添加生产任务', url: '/production-plan/production-task' },
  { label: '原材料出库', url: '/depository-manage/raw-material-inventory' },
  { label: '半成品出库', url: '/depository-manage/semi-material-inventory' },
];

const router = useRouter();

const toPage = url => {
  router.push(url);
};
</script>
<style lang="scss" scoped>
.navigation {
  .card {
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgb(45 140 240 / 40%);
    background-image: linear-gradient(90deg, #2d8cf0, #53a7ff);

    h2 {
      color: #ffffff;
      text-align: center;
    }

    &:hover {
      cursor: pointer;
    }
  }
}
</style>
